<template>
	<div class="layout">
		<div class="container">
			<block v-if="!isSmallSave">
				<div class="header">
					<div class="back" @click="goBack">
						<!-- <image class="back_img" src="../../static/img/back.png"></image> -->
					</div>
				</div>
				<div class="logo">
					<image class="Account" src="../../static/img/Account.svg" />
				</div>
				<div class="account_main">
					<div class="item">
						<div class="item_title">Profile Photo</div>
						<div class="item_main" @click="uploadAvatar">
							<image class="item_avatar" :src="avatar"></image>
							<image class="item_avatar_bg" src="/static/img/avatar_bg.png"></image>
						</div>
						<div class="item_btn" v-if="!isStatue.avatar" @click="uploadAvatar">UPLOAD NEW AVATAR</div>
						<template v-else>
							<div class="item_btn" @click="cancelHandler('avatar')">CANCEL</div>
							<div class="item_btn" @click="saveHandler('avatar')">SAVE</div>
						</template>
						<image class="item_arrow" src="../../static/img/arrow.svg" @click="uploadAvatar"></image>
					</div>
					<div class="item">
						<div class="item_title">Username</div>
						<div class="item_main" v-if="!isStatue.name" @click="chaneName">{{name}}</div>
						<div class="item_ipt_main" v-else>
							<input class="item_ipt" type="text" name="name" v-model="name" maxlength="30" />
						</div>
						<div class="item_btn" v-if="!isStatue.name" @click="chaneName">EDIT</div>
						<template v-else>
							<div class="item_btn" @click="cancelHandler('name')">CANCEL</div>
							<div class="item_btn" @click="saveHandler('name')">SAVE</div>
						</template>
						<image class="item_arrow" src="../../static/img/arrow.svg" @click="chaneName"></image>
					</div>
					<div class="item">
						<div class="item_title">Google Account</div>
						<image class="item_icon" src="../../static/img/googleIcon.svg" />
						<div class="item_main"@click="popStatus(true, 'UNLINK')">{{email}}</div>
						<div class="item_btn"@click="popStatus(true, 'UNLINK')">UNLINK</div>
						<image class="item_arrow" src="../../static/img/arrow.svg"@click="popStatus(true, 'UNLINK')"></image>
					</div>
				</div>	
			</block>
			<div class="change_name" v-else>
				<div class="change_header">
					<div class="btn" @click="cancelName">Cancel</div>
					<div class="name">Username</div>
					<div class="btn" @click="saveHandler('name')">Save</div>
				</div>
				<div class="change_main">
					<input class="item_ipt" type="text" name="name" v-model="name" maxlength="30" />
				</div>
			</div>
		</div>
		<div class="popup" v-show="isStatue.pop">
			<div class="mask"></div>
			<div class="popup_main">
				<div class="popup_box">
					<template v-if="popType == 'UNLINK'">
						<div class="content">ARE YOU SURE YOU WANT TO UNLINK YOUR SOCIAL ACCOUNT?</div>
						<div class="footer">
							<div class="btn" @click="popStatus(false)">CANCEL</div>
							<div class="btn" @click="loginOut">UNLINK</div>
						</div>
					</template>
					<template v-else="popType == 'AVATAR'">
						<div class="content"> ARE YOU SURE YOU WANT TO SAVE THE UPLOADED IMAGE? </div>
						<div class="footer">
							<div class="btn" @click="popStatus(false, 'AVATAR')">CANCEL</div>
							<div class="btn" @click="saveHandler('avatar')">SAVE</div>
						</div>
					</template>
				</div>
			</div>
		</div>
	</div>
</template>

<script setup>
import { computed, watchEffect, ref, reactive } from 'vue';
import apis from '@/apis/apis';

const userInfo = computed(() => loginStore().userInfo);
const isSmallScreen = computed(() => loginStore().isSmallScreen);
const name = ref();
const avatar = ref();
const email = ref();
const isStatue = reactive({
	avatar: false,
	name: false,
	pop: false
});
const isSmallSave = ref(false);
const popType = ref('UNLINK');

const goBack = () => {
	uni.navigateBack({
		delta: 1
	});
}

const uploadAvatar = (type) => {
	uni.chooseImage({
		count: 1, //默认9
		crop: {
			quality: 100,
			width: 408,
			height: 408
		},
		sourceType: ['album'], //从相册选择
		success: async (res) => {
			const path = res.tempFilePaths[0];

			avatar.value = path;
			isStatue.avatar = true;
			
			if (isSmallScreen.value) {
				popStatus(true, 'AVATAR');
			}
			
			const uploadFileRes = await apis.uploadImg(path);

			if (!uploadFileRes.code) {
				avatar.value = uploadFileRes.data.path;
			}
		},
		fail: (err) => {
			console.log(err);
		}
	});
}

const chaneName = () => {
	if (isSmallScreen.value) {
		isSmallSave.value = true;
	}
	isStatue.name = true;
}

const cancelName = () => {
	if (isSmallScreen.value) {
		isSmallSave.value = false;
	}
	isStatue.name = false;
}

const popStatus = (flag, type) => {
	isStatue.pop = flag;
	
	if (flag) {
		popType.value = type;
	} else {
		if (type == 'AVATAR') {
			cancelHandler('avatar');
		}
	}
}

const cancelHandler = type => {
	if (type == 'avatar') {
		avatar.value = userInfo.value.avatar;
	} else if (type == 'name') {
		name.value = userInfo.value.nickname;
	}
	
	isStatue[type] = false;
}

const saveHandler = type => {
	saveProfile(type);
	popStatus(false);
}

const saveProfile = async (type) => {
	uni.showLoading({
		title: 'Saving...',
		mask: true
	});

	const { data: res } = await apis.changeUserInfo({
		nickname: name.value,
		cuid: userInfo.value.cuid,
		avatar: avatar.value,
	});

	uni.hideLoading();
	if (!res.code) {
		const info = Object.assign({}, userInfo.value, res.data.user_info);
		loginStore().setUserInfo(info);
		
		isStatue[type] = false;
		isSmallSave.value = false;
	}
}

const loginOut = async () => {
	// const { data: res } = await apis.loginOut({ email: mail.value, captcha_code: code.value });
	uni.reLaunch({
		url: '/pages/login/login'
	});

	loginStore().setLogout();
}

watchEffect(() => {
	if (userInfo.value) {
		console.log(userInfo.value);
		name.value = userInfo.value.nickname;
		avatar.value = userInfo.value.avatar;
		email.value = userInfo.value.email.replace(/(.{0,3})(.*)(@.*)/, (match, p1, p2, p3) => {
			let visiblePart = p1.length >= 3 ? p1 : p1.padEnd(3, '*');
			return `${visiblePart}***${p3}`;
		});
	}
})
</script>

<style scoped lang="scss">
.layout {
	position: relative;
	background: url('../../static/img/bg-3.jpg') center no-repeat;
	background-size: cover;
	
	&::after {
		content: '';
		position: absolute;
		width: 100%;
		height: 100%;
		/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#000000+0,000000+100&0+0,0.12+100 */
		background: linear-gradient(to bottom,  rgba(0,0,0,0) 0%,rgba(0,0,0,0.25) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	}
}

.container {
	position: relative;
	z-index: 9;
	display: flex;
	flex-direction: column;
	height: 100%;
}

.header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding-top: 16upx;
	
	.back {
		display: inline-flex;
		align-items: center;
		width: 120upx;
		height: 120upx;
		margin: 40upx 20upx 0 120upx;
		flex-direction: column;
		cursor: pointer;
		background: url('../../static/img/back.png') center no-repeat;
		background-size: contain;
		
		&:hover {
			background: url('../../static/img/back_hover.svg') center no-repeat;
			background-size: contain;
		}
	}
	
	.back_img {
		flex-shrink: 0;
		width: 80upx;
		height: 80upx;
		margin: 8upx 0 8upx 20upx;
	}
}

.logo {
	display: flex;
	justify-content: center;
	align-items: center;
	margin: 40upx 0;
	
	.Account {
		width: 1232upx;
		height: 266upx;
	}
	
	.Settings {
		width: 560upx;
		height: 170upx;
	}
}

.account_main {
	width: 70%;
	max-width: 2200upx;
	margin: 0 auto;
	
	.item {
		display: flex;
		align-items: center;
		min-height: 100upx;
		padding: 48upx 60upx;
		border: 1px solid #A0865B;
		margin-bottom: 20upx;
		background: rgba(23, 23, 23, 0.90);
		
		.item_title {
			color: #FFF;
			font-size: 46upx;
			font-style: normal;
			font-weight: 500;
			margin-right: 40upx;
		}
		
		.item_main {
			position: relative;
			flex: 1;
			color: #FFF;
			font-size: 46upx;
			font-family: "Abhaya Libre ExtraBold";
			font-weight: 800;
		}
		
		.item_ipt_main  {
			flex: 1;
			
		}
		
		.item_ipt {
			width: 50%;
			height: 68upx;
			padding: 0 20upx;
			color: #FFF;
			font-size: 32upx;
			font-weight: 800;
			background: rgba(100, 100, 100, 0.60);
		}
		
		.item_icon {
			width: 46upx;
			height: 46upx;
			margin-right: 20upx;
		}
		
		.item_avatar {
			position: relative;
			z-index: 9;
			border-radius: 100%;
			width: 120upx;
			height: 120upx;
		}
		
		.item_avatar_bg {
			position: absolute;
			left: -15upx;
			top: -15upx;
			z-index: 1;
			width: 150upx;
			height: 150upx;
		}
		
		.item_btn {
			color: #FFD581;
			font-size: 36upx;
			font-style: normal;
			font-weight: 400;
			padding: 16upx 40upx;
			border-radius: 34px;
			border: 1px solid #A0865B;
			margin-left: 20upx;
			background: linear-gradient(90deg, rgba(78, 10, 10, 0.80) 0%, #712323 50%, rgba(78, 10, 10, 0.80) 100%);
			cursor: pointer;
			
			&:hover {
				background: #712323;
			}
		}
		
		.item_arrow {
			display: none;
		}
	}
}

.popup {
	position: fixed;
	top: 0;
	left: 0;
	z-index: 99;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	
	.mask {
		position: absolute;
		top: 0;
		left: 0;
		z-index: 1;
		width: 100%;
		height: 100%;
		background: rgba(0, 0, 0, 0.60);
	}
	
	.popup_main {
		position: relative;
		z-index: 9;
		display: flex;
		width: 1200upx;
		
		&:before {
			display: inline-block;
			content: '';
			flex-shrink: 0;
			width: 50upx;
			height: 289upx;
			background: url('/static/img/box/b_l.png') right center no-repeat;
			background-size: contain;
		}
		
		&::after {
			display: inline-block;
			content: '';
			flex-shrink: 0;
			width: 50upx;
			height: 289upx;
			background: url('/static/img/box/b_r.png') left center no-repeat;
			background-size: contain;
		}
	}
	
	.popup_box {
		flex: 1;
		display: flex;
		align-items: center;
		flex-direction: column;
		padding: 50upx 0;
		height: 289upx;
		box-sizing: border-box;
		background: url('/static/img/box/b_bg.jpg') no-repeat;
		background-size: cover;
		
		.content {
			color: #72502E;
			font-size: 42upx;
			font-style: normal;
			font-weight: 600;
			line-height: 42upx;
			padding: 0 100upx;
			text-align: center;
		}
		
		.footer {
			display: flex;
			padding-top: 32upx;
		}
		
		.btn {
			color: #FFD581;
			font-size: 32upx;
			font-family: Aboreto;
			font-style: normal;
			font-weight: 400;
			padding: 12upx 70upx;
			border-radius: 34px;
			border: 1px solid #A0865B;
			margin-left: 40upx;
			background: linear-gradient(90deg, rgba(78, 10, 10, 0.80) 0%, #712323 50%, rgba(78, 10, 10, 0.80) 100%);
			cursor: pointer;
			
			&:hover {
				background: #712323;
			}
		}
	}
}
@media (max-width: 1024px) {
	.header  {
			height: 104upx;
			
		.back {
			width: 80upx;
			height: 80upx;
			margin: 10upx 0 0 32upx;
		}
		
		.back_img {
			flex-shrink: 0;
			width: 80upx;
			height: 80upx;
			margin-right: 20upx;
		}
	}
	
	.logo {
		flex-direction: column;
		margin-top: 50upx;
		
		.Account {
			width: 616upx;
			height: 133upx;
		}
		
		.Settings {
			width: 280upx;
			height: 85upx;
		}
	}
	
	.account_main {
		width: 80%;
		padding: 0 16upx;
		border: 1px solid #A0865B;
		background: rgba(23, 23, 23, 0.90);
		
		.item {
			padding: 20upx;
			border: 0;
			border-bottom: 1px solid rgba(255, 255, 255, 0.60);
			margin-bottom: 0;
			
			.item_btn, .item_icon {
				display: none;
			}
			
			.item_title {
				font-size: 32upx;
				margin: 0;
			}
			
			.item_arrow {
				display: block;
				width: 16upx;
				height: 32upx;
			}
			
			.item_main {
				text-align: right;
				margin-right: 20upx;
				font-size: 32upx;
			}
			
			.item_avatar {
				width: 90upx;
				height: 90upx;
			}
			
			.item_avatar_bg {
				left: auto;
				top: -10upx;
				right: -10upx;
				z-index: 1;
				width: 110upx;
				height: 110upx;
			}

			&:last-child {
				border-bottom: 0;
			}
		}
	}
	
	.change_name {
		display: flex;
		flex-direction: column;
		height: 100%;
		
		.change_header {
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 30upx 40upx;
			
			.btn, .name {
				color: #FFD581;
				font-size: 36upx;
				font-style: normal;
				font-weight: 600;
				line-height: 42upx;
			}
			
			.name {
				color: #fff;
			}
		}
		
		.change_main {
			width: 100%;
			height: 96upx;
			background: #F6EEE0;
			
			.item_ipt {
				padding: 0 40upx;
				height: 96upx;
				line-height: 96upx;
				color: #000;
			}
		}
	}
	
	.popup {
		
		.popup_main {
			width: calc(80% + 32upx);
		}
		
		.popup_box {
			padding: 24upx 0;
			
			.content {
				font-size: 32upx;
				line-height: 38upx;
				padding: 32upx 0;
			}
			
			.footer {
				padding-top: 24upx;
			}
			
			.btn:first-child {
				margin: 0;
			}
		}
	}
}
</style>